// 通过使用 output.filename 进行文件名替换，可以确保浏览器获取到修改后的文件。
// [hash] 替换可以用于在文件名中包含一个构建相关(build-specific)的 hash，
// 但是更好的方式是使用 [chunkhash] 替换，在文件名中包含一个 chunk 相关(chunk-specific)的哈希。

// CommonsChunkPlugin 有一个较少有人知道的功能是，能够在每次修改后的构建结果中，
// 将 webpack 的样板(boilerplate)和 manifest 提取出来。
// 通过指定 entry 配置中未用到的名称，此插件会自动将我们需要的内容提取到单独的包中

// 引入顺序在这里很重要。CommonsChunkPlugin 的 'vendor' 实例，必须在 'manifest' 实例之前引入。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: [
      'lodash'
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Caching'
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        },
        manifest: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        } 
      }
    }
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};